<template>
  <!--  -->
  <a-card class="general-card" title="盘亏单">
    <a-form v-model="selectFormData" class="formHeader">
      <a-row justify="start" :gutter="24">
        <a-col class="formHeader-criteria">
          <a-row :gutter="16">
            <a-col span="8">
              <a-form-item label="商品编号" label-col-flex="100px">
                <a-input v-model="selectFormData.MF001" allow-clear @keyup.enter="selectUserMsg" />
              </a-form-item>
            </a-col>
            <a-col span="8">
              <a-form-item label="商品名称" label-col-flex="100px">
                <a-input v-model="selectFormData.MF002" allow-clear @keyup.enter="selectUserMsg" />
              </a-form-item>
            </a-col>
            <a-col span="8">
              <a-form-item label="规格类型" label-col-flex="100px">
                <a-input v-model="selectFormData.MF002" allow-clear @keyup.enter="selectUserMsg" />
              </a-form-item>
            </a-col>
          </a-row>


        </a-col>
        <a-col class="formHeader-btn">
          <a-space direction="vertical" :size="20">
            <a-button type="primary" @click="selectDataMsg">
              <template #icon>
                <icon-search />
              </template>
              <template #default>查询</template>
            </a-button>
            <a-button @click="resetSelectFormData">
              <template #icon>
                <icon-loop />
              </template>
              <template #default>重置</template>
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-form>

    <!-- <a-divider dashed /> -->

    <!-- <formButtonGroup
      v-model:columns="columns"
      v-model:size="size"
      :config="config"
      :search-bar="searchBar"
      @tapNew="tapNew"
      @refresh="init"
      @change-search-bar="changeSearchBar"
    /> -->

    <!-- 用户显示区域 -->
    <div class="user-area">
      <a-table :columns="columns" :data="data">
        <template #optional="{ record, rowIndex }">
          <a-space>
            <a-button type="text" @click="upUser(record, rowIndex)">修改</a-button>
            <a-button v-can-delete type="text" @click="delUser(record, rowIndex)">删除</a-button>
          </a-space>
        </template>
      </a-table>
    </div>
  </a-card>

  <!-- 添加用户遮罩 -->
  <a-modal v-model:visible="visible" :title="ModelTitle" title-align="start" @before-ok="handleBeforeOk" @cancel="handleCancel">
    <a-form ref="handleSubmit" :model="formData" :rules="rules">
      <a-form-item field="MF001" label="用户编号" validate-trigger="input" required>
        <a-input v-model="formData.MF001" placeholder="请输入" />
      </a-form-item>
      <a-form-item field="MF002" label="用户名称" validate-trigger="input" required>
        <a-input v-model="formData.MF002" placeholder="请输入" />
      </a-form-item>
      <a-form-item field="MF007" label="部门编号" validate-trigger="input" required>
        <a-input v-model="formData.MF007" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="修改时间" validate-trigger="input" required>
        <a-date-picker
          v-model="MODI_DATE"
          style="width: 380px"
          show-time
          :default-value="new Date()"
          :time-picker-props="{ defaultValue: '01:01:01' }"
          format="YYYY-MM-DD HH:mm:ss"
          @ok="onOk"
        />
      </a-form-item>
    </a-form>
    <template #footer></template>
  </a-modal>

  <!-- 提示确认删除 -->
  <a-modal v-model:visible="delVisible" title-align="center" @ok="delHandleOk" @cancel="delHandleCancel">
    <template #title> 删除提示 </template>
    <div>您确定要删除该用户吗</div>
  </a-modal>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './inventoryLossModel';
import formButtonGroup from '@com/formButtonGroup/formButtonGroup.vue';
export default {
  components: {
    formButtonGroup,
  },
  setup() {
    const {
      base,
      onOk,
      handleClick,
      handleBeforeOk,
      handleCancel,
      upUser,
      delUser,
      delHandleOk,
      delHandleCancel,
      selectDataMsg,
      resetSelectFormData,
    } = importConfig();
    return {
      ...toRefs(base),
      onOk,
      handleClick,
      handleBeforeOk,
      handleCancel,
      upUser,
      delUser,
      delHandleOk,
      delHandleCancel,
      selectDataMsg,
      resetSelectFormData,
    };
  },
};
</script>

<style lang="less" scoped>
:deep(.arco-card-header-title) {
  text-align: left;
}
.formHeader {
  &-buttom {
    padding: 10px 0px;
    display: flex;
    align-items: flex-end;
    align-content: flex-end;
    justify-content: flex-end;
  }
  &-criteria {
    flex: 1 1 0;
    &-postizz {
      display: flex;
      justify-content: flex-end;
      margin-top: 25px;
    }
  }

  &-btn {
    border-left: 1px solid #ddd;
    flex: 0 0 86px;
    text-align: right;
  }
}
.add-user-btn {
  display: flex;
}

.user-area {
  margin-top: 20px;

  :deep(.arco-table-td-content) {
    text-align: center;
  }
}
</style>
